<template>
    <div id="">
         <el-form ref="form"  label-width="80px" :model="spu">
            <el-form-item label="spu名称">
                <el-input placeholder="spu名称" v-model="spu.spuName"></el-input>
            </el-form-item>
            <el-form-item label="品牌">
                <el-select  placeholder="请选择品牌" v-model="spu.tmId">
                    <el-option :label="tm.tmName" :value="tm.id" v-for="(tm,index) in tradeMarkList" :key="tm.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="spu描述" >
                <el-input type="textarea" placeholder="spu描述" v-model="spu.description"></el-input>
            </el-form-item>
            <el-form-item label="spu图片">
                <!-- 照片墙 action:照片上传的地址  list-type：文件列表的类型 on-preview：图片预览的时候会触发 on-remove：当删除图片的时候会触发-->
                <el-upload
                    action="/dev-api/admin/product/fileUpload"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :file-list="spuImageList"
                    :on-success="handleSuccess"
                    >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-select  :placeholder="`还有${unSelectSaleAttr.length}项未选择`" v-model="attrIdAndAttrName">
                    <el-option :label="unselect.name" :value="`${unselect.id}:${unselect.name}`" v-for="(unselect,index) in unSelectSaleAttr" :key="unselect.id"></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-plus" :disabled="!attrIdAndAttrName" @click="addSaleAttr">添加销售属性</el-button>
                <el-table  style="width: 100%" border :data="spu.spuSaleAttrList">
                    <el-table-column type="index" label="序号" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="saleAttrName" label="属性名"  >
                    </el-table-column>
                    <el-table-column prop="" label="属性值列表"  >
                        <template slot-scope="{row,$index}"> 
                            <!-- @close="handleClose(tag)" -->
                             <el-tag :key="tag.id" v-for="(tag,index) in row.spuSaleAttrValueList" closable :disable-transitions="false" @close="row.spuSaleAttrValueList.splice(index,1)">
                                {{tag.saleAttrValueName}}
                             </el-tag>
                             <!-- @keyup.enter.native="handleInputConfirm"
                                @blur="handleInputConfirm" -->
                             <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue" ref="saveTagInput"  size="small" @blur="handleInputConfirm(row)"></el-input>
                             <!-- @click="showInput" -->
                             <el-button v-else class="button-new-tag" size="small" @click="addSaleAttrValue(row)">添加</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作"  >
                        <template slot-scope="{row,$index}"> 
                            <el-button type="danger" icon="el-icon-delete" size="mini" @click="spu.spuSaleAttrList.splice($index,1)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="addOrUpdateSpu">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
         </el-form>
    </div>
</template>

<script >
export default {
    name: "",
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            //spu属性初始化是空对象，在修改spu的时候，会向服务器发送请求，返回spu信息，在修改的时候可以利用服务器返回的那个对象收集最新的数据提交给服务器
            //添加spu，如果是添加spu的时候并没有向服务器发送请求，数据收集到哪里（spu)，收集数据的时候有哪些字段，需要看接口文档
            spu:{
               //三级分类的id
               category3Id:0,
               //描述
               description:"",
               //spu名称
               spuName:"",
               //平台的id
               tmId:"",
               //收集spu图片的信息
               spuImageList:[

               ],
               //平台属性与属性值收集
               spuSaleAttrList:[

               ]
            },
            tradeMarkList:[], //存储品牌信息的数组
            spuImageList:[],  //存储spu图片数据
            saleAttrList:[],  //存储平台销售属性
            attrIdAndAttrName:'',  //收集未选择的销售属性的id----

        }
    },
    components: {},
    methods: {
        //照片墙删除图片的回调
        handleRemove(file, fileList) {
            //filelist:照片墙删除某一张图片之后，剩余的其他的图片
         // console.log(file, fileList);
         //收集照片墙图片的数据
         this.spuImageList = fileList
      },
        //照片墙图片预览的回调
        handlePictureCardPreview(file) {
           this.dialogImageUrl = file.url;
           this.dialogVisible = true;
      },
      //初始化spuform的数据
        async initSpuData(spu){
          //获取spu信息的数据
        let spuResult = await this.$API.spu.reqSpu(spu.id)
        if(spuResult.code==200){
            //修改spu的时候需要向服务器发请求，把服务器返回的对象，赋值给spu属性
            this.spu=spuResult.data
         }
         //获取品牌信息
         let tradeMarkResult = await this.$API.spu.reqTradeMarkList()
         if(tradeMarkResult.code==200){
            this.tradeMarkList=tradeMarkResult.data
         }
         //获取spu图片的数据
         let spuImageResult = await this.$API.spu.reqSpuImageList(spu.id)
         if(spuImageResult.code==200){
            let listArr=spuImageResult.data
            listArr.forEach(item => {
                item.name = item.imgName
                item.url = item.imgUrl
            });
            this.spuImageList = listArr
         }
         //获取平台全部销售属性
         let saleResult = await this.$API.spu.reqBaseSaleAttrList()
         if(saleResult.code==200){
            this.saleAttrList = saleResult.data
         }
      },
      //照片墙图片上传成功
      handleSuccess(response,file,fileList){
          //收集图片的信息
          this.spuImageList=fileList
      },
      //添加新的销售属性
      addSaleAttr(){
        //把收集到的销售属性数据进行分割
        const [baseSaleAttrId,saleAttrName] = this.attrIdAndAttrName.split(':')
        //向spu对象的spuSaleAttrList属性里面添加新的销售属性
        let newSaleAttr = {baseSaleAttrId,saleAttrName,spuSaleAttrValueList:[]}
        //添加新的销售属性
        this.spu.spuSaleAttrList.push(newSaleAttr)
        //清空数据
        this.attrIdAndAttrName=""
      },
      //添加按钮的回调
      addSaleAttrValue(row){
         //点击添加按钮会在button和input之间进行转换的，通过inputvisible来控制
         //挂载在销售属性身上的响应式数据inputVisible
         this.$set(row,'inputVisible',true)
         //通过响应式数据inputValue字段收集新增的属性值
         this.$set(row,'inputValue','')
      },
      //el-input失去焦点的回调
      handleInputConfirm(row){
          //解构出销售属性当中收集数据
           const {baseSaleAttrId,inputValue} = row
           //新增的属性值不能为空
           if(inputValue.trim()==""){
              this.$message('属性值不能为空')
              return
           }
           //输入的值不能重复
           let result = row.spuSaleAttrValueList.some(item=>item.saleAttrValueName==inputValue)
          //console.log(result)
           if(result) return
          //新增的销售属性值
          let newSaleAttrValue = {baseSaleAttrId,saleAttrValueName:inputValue}
          //新增
          row.spuSaleAttrValueList.push(newSaleAttrValue)
          //修改inputVisible的值为false
          row.inputVisible = false
      },
      //保存按钮的回调
      async addOrUpdateSpu(){
        //整理参数：需要整理照片墙的数据
        //携带参数：对于图片，需要携带照片imageName与imageUrl字段
        this.spu.spuImageList = this.spuImageList.map(item=>{
            return {
                imageName:item.name,
                imageUrl:(item.response && item.response.data)||item.url
            }
        })
        //发请求
        let result = await this.$API.spu.reqAddOrUpdateSpu(this.spu)
        if(result.code==200){
            //提示
            this.$message({type:'success',message:'保存成功'})
            //通知父组件回到场景0
            this.$emit('changeScene',{scene:0,flag:this.spu.id?'修改':'添加'})
        }
        //清除数据
         Object.assign(this._data,this.$options.data())
      },
      //点击添加spu按钮的时候，发请求的函数
      async addSpuData(category3Id){
        //添加spu的时候，收集三级分类的id
        this.spu.category3Id = category3Id
        //获取品牌信息
         let tradeMarkResult = await this.$API.spu.reqTradeMarkList()
         if(tradeMarkResult.code==200){
            this.tradeMarkList=tradeMarkResult.data
         }
         //获取平台全部销售属性
         let saleResult = await this.$API.spu.reqBaseSaleAttrList()
         if(saleResult.code==200){
            this.saleAttrList = saleResult.data
         }
      },
      //取消按钮的回调
      cancel(){
        //取消按钮的回调，通知父组件切换场景为0
          this.$emit('changeScene',{scene:0,flag:''})
          //清理数据
          //Object.assign：es6中新增的方法  可以合并对象
          //组件实例 this._data,可以操作data当中响应式数据
          //this.$options可以获取配置对象 配置对象的data函数执行 返回的响应式数据为空的
          Object.assign(this._data,this.$options.data())
      }
      

    },
    computed:{
        //计算出还没选择的销售属性
        unSelectSaleAttr(){
            //当前spu拥有的属于自己的销售属性spu.spuSaleAttrList  颜色
            //数组的过滤方法，可以从已有的数组当中过滤出用户需要的元素，并返回一个新的数据
            let result = this.saleAttrList.filter(item=>{
                //every会返回一个布尔值
                return this.spu.spuSaleAttrList.every(item1=>{
                    return item.name !=item1.saleAttrName
                })
            })
            return result
        }
    }
}
</script>

<style >
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
